<template>
  <el-dialog :visible.sync="isShowDialog" title="选择地址" width="1000px" top="50px">
    <div class="search">
      <el-input v-model="keyword" placeholder="请输入搜索地址信息" clearable>
        <el-button slot="append" icon="el-icon-search" @click="searchAddress"/>
      </el-input>
    </div>
    <div id="mapContainer" style="width: 100%; height: 350px"/>
    <div class="address">
      <span>当前选点：</span>
      <b>{{ nowAddress ? (nowAddress.addressComponents.province + nowAddress.addressComponents.city + nowAddress.addressComponents.district + nowAddress.addressComponents.streetNumber) : '尚未选点' }}</b>
      <el-button v-if="nowAddress" type="text" @click="selectAddress(nowAddress, 1)">【确认选择】</el-button>
    </div>
    <el-table :data="nearPointList" highlight-current-row height="300" style="width: 100%" class="table">
      <el-table-column prop="address" label="附近推荐地点">
        <template slot-scope="scope">{{ scope.row.address }}{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click.native.prevent="selectAddress(scope.row, 2)">确认选择</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script type='text/javascript' src="https://map.qq.com/api/js?v=2.exp&key=L6NBZ-UY7YU-MX4V7-GHSQX-3HHSE-CHBIT&libraries=drawing,geometry,autocomplete,convertor"></script>
<script>
export default {
  data() {
    return {
      keyword: '', // 搜索关键词
      nearPointList: [], // 附近地址
      isShowDialog: false, // 是否显示弹窗
      markersArray: [],
      geocoder: null,
      nowAddress: null, // 选择的地点
      geocoderLocation: null
    }
  },
  // plugins:[
  //   new webpack.ProvidePlugin({
  //     $: "jquery",
  //     jQuery: "jquery",
  //   })
  // ],
  // created() {
  //   this.loadTencentMapsApi();
  // },
  // mounted() {
  //   this.initMap();
  // },
  methods: {
    // loadTencentMapsApi() {
    //   const script = document.createElement('script');
    //   script.src = 'https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY&libraries=drawing,geometry,autocomplete,convertor';
    //   script.onload = () => {
    //     this.initMap();
    //   };
    //   document.head.appendChild(script);
    // },
    // 搜索地址
    searchAddress() {
      if (!this.keyword) {
        return this.$message.error('请输入搜索地址信息')
      }
      this.setLocationByAddress(this.keyword)
    },
    // 初始化地图
    initMap() {
      const that = this;
      const latLon = new qq.maps.LatLng(39.916527, 116.397128)
      var map = new qq.maps.Map(document.getElementById('mapContainer'), {
        zoom: 13, center: latLon, mapTypeId: qq.maps.MapTypeId.ROADMAP
      })
      var listener = qq.maps.event.addListener(map, 'click', function(event) {
        that.setLocationByLatLng(event.latLng.getLat(), event.latLng.getLng())
      })
      // 经纬度解析类回调函数
      this.geocoder = new qq.maps.Geocoder({
        complete: function(result) {
          console.log(result.detail)
          that.nowAddress = result.detail
          that.nearPointList = result.detail.nearPois
          map.setCenter(result.detail.location)
          // 标记点
          const marker = new qq.maps.Marker({ map: map, position: result.detail.location })
          that.markersArray.push(marker)
          if (that.markersArray.length > 1) {
            for (let i = 0; i < that.markersArray.length - 1; i++) {
              that.markersArray[i].setMap(null)
              // 清除标记
            }
          }
        }
      })
      // 地址解析回调函数
      that.geocoderLocation = new qq.maps.Geocoder({ complete: function(result) {
        // 查找附近的点
        const latLng = new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng)
        that.geocoder.getAddress(latLng)
      }
      })
    },
    // 选择地址事件
    selectAddress(item, type) {
      if (type === 1) {
        const addressInfo = item.addressComponents
        this.$emit('on-select', addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.streetNumber, item.location.lat, item.location.lng)
        this.isShowDialog = false
      }
      if (type === 2) {
        this.$emit('on-select', item.address + item.name, item.latLng.lat, item.latLng.lng)
        this.isShowDialog = false
      }
    },
    // 显示地图
    show() {
      this.isShowDialog = true
      setTimeout(() => { this.keyword = ''; this.initMap() })
    },
    // 根据地址信息进行定位
    setLocationByAddress(address) {
      setTimeout(() => {
        this.geocoderLocation.getLocation(address)
      }
      )
    },
    // 根据经纬度进行定位
    setLocationByLatLng(lat, lng) {
      setTimeout(() => {
        const latLng = new qq.maps.LatLng(lat, lng); this.geocoder.getAddress(latLng)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.search {
  margin-bottom: 15px;
  margin-top: -20px;
}
.address {
  margin-top: 15px;
  margin-bottom: 10px;
  .el-button {padding: 0;}
}
.table {
  .el-button {padding: 0;}
}
</style>
